<template>
  <div>
    <h1>This is an about {{ title }}</h1>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text"   v-model="title" class="layui-input"  @keydown.enter="add(title)">
    </div>
  </div>
    <table class="layui-table">
      <thead>
        <tr>
          <th>昵称</th>
          <th>加入时间</th>
          <th>签名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in todo" :key="'todo-' + index">
          <td><input type="checkbox" name="" title="发呆" lay-skin="primary"> </td>
          <td>{{item}}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
            @click="delItem()">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
// eslint-disable-next-line object-curly-newline
import { computed, defineComponent, reactive, ref } from 'vue';
import store from '@/store';

export default defineComponent({
  setup() {
    const title = ref('');
    const add = (value:string) => {
      if (value.trim() === '') return;
      store.commit('add', value);
      title.value = '';
    };
    const delItem = (index: number) => {
      store.commit('deletes', index);
    };
    const checks = (index: number) => {
      store.commit('check', index);
    };
    return reactive({
      title,
      add,
      delItem,
      checks,
      todo: computed(() => store.state.todo),
    });
  },
});
</script>

<style scoped>
</style>
